<template>
	<view class="template-integral tn-safe-area-inset-bottom">
		<!-- 顶部自定义导航 -->
		<tn-nav-bar fixed alpha customBack>
			<view slot="back" class='tn-custom-nav-bar__back' @click="goBack">
				<text class='icon tn-icon-left'></text>
				<text class='icon tn-icon-home-capsule-fill'></text>
			</view>
		</tn-nav-bar>


		<view class="integral-wrap" :style="{paddingTop: vuex_custom_bar_height + 'px'}"
			style="background: linear-gradient(180deg, #dffbfe, #f8feff);">
			<view class="adver-wrap tn-shadow tn-margin tn-bg-white tn-padding">
				<view class="tn-margin-bottom tn-text-bold">
					防火巡查
				</view>
				<!-- <tn-form :model="form" ref="form" :errorType="['message']" :labelWidth="380">
					<tn-form-item v-for="(item,indexs) in form.formList" :label="item.name"
						:prop="'formList.' + indexs + '.value'">
						<tn-radio-group v-model="item.value" v-if="item.type == 'radio'">
							<tn-radio v-for="(item, index) in radioList" :key="index" :name="item.name"
								:disabled="item.disabled">
								{{ item.name }}
							</tn-radio>
						</tn-radio-group>
					</tn-form-item>
				</tn-form> -->
				<view class="tn-border-solids-bottom tn-padding" v-for="(item,indexs) in form.formList" :key="indexs">
					<view class="tn-flex tn-flex-col-center">

						<view class="tn-margin-right" style="width: 300rpx;">
							{{item.name}}
						</view>
						<view class="tn-color-gray">
							<tn-radio-group v-model="item.value" v-if="item.type == 'radio'">
								<tn-radio v-for="(item, index) in radioList" :key="index" :name="item.name"
									:disabled="item.disabled">
									{{ item.name }}
								</tn-radio>
							</tn-radio-group>
						</view>
					</view>
					<view class="form-detail" v-if="item.value=='是'">
						<view class="tn-flex tn-text-center tn-flex-col-center">
							<view class="tn-margin-right">
								问题描述
							</view>
							<view class="">
								<tn-input v-model="item.problem.desc" class="tn-border-solid-bottom" />
							</view>
						</view>
						<view class="tn-flex tn-flex-direction-column tn-flex-row-left">
							<view class="tn-margin-top tn-margin-bottom">
								上传图片
							</view>
							<view class="">
								<tn-image-upload :action="action" :fileList="fileList"></tn-image-upload>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="tn-padding tn-color-red">
				* 以上内容如有否，则填写不合格内容及上传图片，提交部门
			</view>
		</view>

		<tn-button backgroundColor="#3668FC" fontColor="#fff" padding="40rpx 0" shadow fontBold width="80%"
			style="margin-left: 80rpx;margin-bottom: 80rpx;" @click="submit">提交</tn-button>
	</view>
</template>

<script>
	import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
	export default {
		name: 'TemplateIntegral',
		mixins: [template_page_mixin],
		data() {
			return {
				type: '',
				form: {
					formList: [{
						name: "用火用电有无违章情况",
						prop: 'data1',
						value: '',
						type: 'radio',
						problem: {
							desc: '',
							imgs: [],
						},
					}, {
						name: "工作结束有遗留火种、是否切断非必要电源",
						prop: 'data2',
						value: '',
						type: 'radio',
						problem: {
							desc: '',
							imgs: []
						},
					}, {
						name: "安全出口是否锁闭",
						prop: 'data1',
						value: '',
						type: 'radio',
						problem: {
							desc: '',
							imgs: []
						},
					}, {
						name: "疏散通道上是否堆放杂物",
						prop: 'data1',
						value: '',
						type: 'radio',
						problem: {
							desc: '',
							imgs: []
						},
					}, {
						name: "安全出口、疏散通道是否堵塞",
						prop: 'data1',
						value: '',
						type: 'radio',
						problem: {
							desc: '',
							imgs: []
						},
					}, {
						name: "安全疏散指示、应急照明是否完好有效",
						prop: 'data1',
						value: '',
						type: 'radio',
						problem: {
							desc: '',
							imgs: []
						},
					}, {
						name: "灭火器压力值是否正常（指针是否处于绿色区域）",
						prop: 'data1',
						value: '',
						type: 'radio',
						problem: {
							desc: '',
							imgs: []
						},
					}, {
						name: "消防安全重点部位人员是否在岗",
						prop: 'data1',
						value: '',
						type: 'radio',
						problem: {
							desc: '',
							imgs: []
						},
					}, {
						name: "其他消防安全情况是否正常",
						prop: 'data1',
						value: '',
						type: 'radio',
						problem: {
							desc: '',
							imgs: []
						},
					}, ],
				},

				radioList: [{
						name: '是',
						disabled: false
					},
					{
						name: '否',
						disabled: false
					}
				]

			}
		},
		onLoad(option) {
			this.type = option.type
		},
		methods: {
			// 跳转
			tn(e) {
				if (this.type == 1) {
					uni.navigateTo({
						url: e,
					});
				}
			},
			submit() {
				console.log(this.form)
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* 胶囊*/
	.tn-custom-nav-bar__back {
		width: 100%;
		height: 100%;
		position: relative;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		box-sizing: border-box;
		background-color: rgba(0, 0, 0, 0.15);
		border-radius: 1000rpx;
		border: 1rpx solid rgba(255, 255, 255, 0.5);
		color: #FFFFFF;
		font-size: 18px;

		.icon {
			display: block;
			flex: 1;
			margin: auto;
			text-align: center;
		}

		&:before {
			content: " ";
			width: 1rpx;
			height: 110%;
			position: absolute;
			top: 22.5%;
			left: 0;
			right: 0;
			margin: auto;
			transform: scale(0.5);
			transform-origin: 0 0;
			pointer-events: none;
			box-sizing: border-box;
			opacity: 0.7;
			background-color: #FFFFFF;
		}
	}

	/* 顶部背景图 start */
	.top-backgroup {
		height: 450rpx;
		z-index: -1;

		.backgroud-image {
			width: 100%;
			height: 450rpx;
			// z-index: -1;
		}
	}

	/* 顶部背景图 end */

	.form-detail {
		background-color: #d5d5d540;
		width: 100%;
		min-height: 300rpx;
		border-radius: 20rpx;
		padding: 20rpx;
	}

	.tn-image-upload .tn-image-upload-class {

		.tn-image-upload__item-preview {

			width: 180rpx;
			height: 180rpx;
		}
	}

	.tn-image-upload-class {
		.tn-image-upload__item {

			width: 180rpx !important;
			height: 180rpx !important;
		}
	}
</style>